<template>
  <div class="flex min-h-screen items-center justify-center p-4">
    <div class="w-full max-w-md">
      <div class="bg-base-100 rounded-lg shadow-lg overflow-hidden">
        <ZCard visual="border" class="shadow-xl">
          <h2 class="text-2xl font-bold text-center">
            欢迎使用实训报告管理系统
          </h2>
          <p class="text-center mb-6">
            {{ active == 0 ? "登录" : "注册" }}您的账户
          </p>
          <ZTabs
            class="flex p-4"
            tab-class="flex-1 m-2"
            content-class="my-2 px-6 py-4 bg-base-100"
            visual="box"
            :tabs="tabs"
            :active="active"
            @change="(index) => (active = index)"
          >
            <template #login>
              <LoginForm @change="active = 1" />
            </template>
            <template #register>
              <RegisterForm @change="active = 0" />
            </template>
          </ZTabs>
        </ZCard>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref } from "vue";
import ZCard from "@/components/ui/ZCard.vue";
import ZTabs from "@/components/ui/ZTabs.vue";

import LoginForm from "./components/LoginForm.vue";
import RegisterForm from "./components/RegisterForm.vue";

const tabs = [
  {
    name: "login",
    label: "登录",
  },
  {
    name: "register",
    label: "注册",
  },
];

const active = ref(0);
</script>
